<template>
	<view class="container">
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }" :scroll-into-view="leftIntoView"
						:scroll-with-animation="true">
						<view class="item" v-for="(item,index) in leftArray" :key="index"
							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
							@tap="leftTap">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="main">
					<!-- <swiper class="swiper" :style="{ 'height':scrollHeight }" :current="leftIndex"
						@change="swiperChange" vertical="true" duration="300"> -->
						<view v-for="(item,index) in mainArray" :key="index">
							<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
								<navigator v-for="(item2,index) in mainArray"  class="item" :url="`productPage/productDetail?id=${item2.productId}`">
									<!-- <view class="title">
										<view>{{item.name}}</view>
									</view> -->
									<view class="goods">
										<image :src="item2.titleImage" mode=""></image>
										<view class="goods-right">
											<view>{{item2.name}}</view>
											<view class="describe">{{item2.parameter}}</view>
										</view>
									</view>
								</navigator>
							</scroll-view>
						</view>
						<!-- swiper-item改成了view -->
					<!-- </swiper> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductMenu,
		getProduct
	} from "@/common/request.js"

	export default {
		data() {
			return {
				scrollHeight: '400px',
				leftArray: [],
				mainArray: [],
				leftIndex: 0
			}
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
			}
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				}, 50);   // 原本200的延迟
			})
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollHeight = `${res.height}px`;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData() {
				// 获取菜单
				getProductMenu().then(res => {
					this.leftArray = res;
					// 初识化第一条数据
					getProduct(res[0].productMenuId).then(res2 => {
						this.mainArray=res2;
					})
				})
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.leftIndex = Number(index);
				// 清除缓存
				this.mainArray=''
				getProduct(this.leftArray[this.leftIndex].productMenuId).then(res => {
					console.log(res);
					this.mainArray=res;
					
				})
			},
			/* 轮播图切换 */
			swiperChange(e) {
				let index = e.detail.current;
				this.leftIndex = Number(index);
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			// line-height: 120rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #42b983;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				height: 500px;
			}

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 999;
			}

			.item {
				padding-bottom: 10rpx;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 20rpx;
				margin-top: 10rpx;

				&>image {
					flex:4;
					border: #eee 4rpx solid;
					border-radius: 10rpx;
					width: 240rpx;
					height: 180rpx;
					margin-right: 16rpx;
					margin-left: 2px;
				}
				
				.goods-right{
					flex: 5;
					.describe {
						font-size: 24rpx;
						color: #999;
					}
					
					.money {
						font-size: 24rpx;
						color: #efba21;
					}
				}
			}
		}
	}
</style>
